<template>
	<scroll-view scroll-y class="scroll-container">
		<!--轮播图 -->
		<view class="card">
			<swiper autoplay="true" interval="3000" circular="true" indicator-dots="true" class="swiper">
				<swiper-item>
					<image src="/static/city1.png" mode="aspectFill" class="swiper-img">
					</image>
				</swiper-item>
				<swiper-item>
					<image src="/static/city2.jpg" mode="aspectFill" class="swiper-img">
					</image>
				</swiper-item>
				<swiper-item>
					<image src="/static/city3.jpg" mode="aspectFill" class="swiper-img">
					</image>
				</swiper-item>
				<swiper-item>
					<image src="/static/city4.jpg" mode="aspectFill" class="swiper-img">
					</image>
				</swiper-item>
				<swiper-item>
					<image src="/static/city5.jpg" mode="aspectFill" class="swiper-img">
					</image>
				</swiper-item>
			</swiper>
		</view>
		<!--城市介绍-->
		<view class="card">
			<text class="title">泉州介绍</text>
			<rich-text :nodes="cityIntro"></rich-text>
		</view>
		<!-- 探索进度 -->
		<view class="card progress-card">
			<text class="title">探索进度</text>
			<text class="progress-desc">当前进度: {{ progress }}%</text>
			<view class="progress-wrap">
				<view class="progress-bg">
					<view class="progress-bar" :style="{ width: progress + '%' }"></view>
				</view>
				<text class="progress-text">{{ progress }}%</text>
			</view>
		</view>
		<!--  城市选择 -->
		<view class="card">
			<text class="title">选择城市</text>
			<picker mode="region" @change="handleCityChange" value="{{ selectedCity }}">
				<view class="picker-content">
					当前选择: {{ selectedCity[0] }} - {{ selectedCity[1] }} - {{ selectedCity[2] }}
				</view>
			</picker>
		</view>
		<!-- 媒体展示-视频 -->
		<view class="card">
			<text class="title">泉州宣传</text>
			<video src="/static/city-video.mp4" controls poster="/static/video-poster.jpg" class="video"></video>
		</view>
		<!-- 背景音乐 -->
		<view class="card music-card">
			<text class="title">泉州背景音乐</text>
			<button class="music-btn" @click="togglePlay">
				{{ isPlaying ? '暂停' : '播放' }}
			</button>
			<text class="music-desc">泉州南音 - 泉州传统乐团</text>
			<!-- 音乐进度条 -->
			<view class="music-progress-wrap">
				<view class="music-progress-bg">
					<view class="music-progress-bar" :style="{ width: progressPercent + '%' }"></view>
				</view>
				<text class="music-time">
					{{ formatTime(currentTime) }} / {{ formatTime(duration) }}
				</text>
			</view>
		</view>
		<!-- 偏好设置 -->
		<view class="card">
			<text class="title">偏好设置</text>
			<view class="preference-item">
				<text>出行方式:</text>
				<radio-group @change="handleTravelModeChange">
					<label>
						<radio value="bus" :checked="travelMode === 'bus'" />公交
					</label>
					<label>
						<radio value="drive" :checked="travelMode === 'drive'" />自驾
					</label>
					<label>
						<radio value="walk" :checked="travelMode === 'walk'" />步行
					</label>
				</radio-group>
			</view>
			<view class="preference-item">
				<text>显示推荐景点:</text>
				<switch :checked="showRecommend" @change="handleShowRecommendChange" />
			</view>
			<view class="preference-item">
				<text>探索半径: {{ radius }}km</text>
				<slider :value="radius" @change="handleRadiusChange" min="1" max="20" />
			</view>
		</view>


	</scroll-view>
</template>

<script>
	let audioCtx = null; // 全局音频上下文，避免重复创建
	export default {
		data() {
			return {
				cityIntro: `
									<p style="font-size: 16px; font-weight: bold; margin-bottom: 12px; color: #000000;">海上丝绸之路起点 - 泉州</p>
									<p style="margin-bottom: 8px; line-height: 1.6; color: #333333;"><span style="font-weight: bold;">历史文化：</span>泉州是国务院首批公布的24个历史文化名城之一，是古代"海上丝绸之路"起点，宋元时期被誉为"东方第一大港"。</p>
									<p style="margin-bottom: 8px; line-height: 1.6; color: #555555;"><span style="font-weight: bold;">著名景点：</span>清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。</p>
									<p style="line-height: 1.6; color: #666666;"><span style="font-weight: bold;">特色文化：</span>拥有<span style="color: #1a73e8;">南音</span>、<span style="color: #1a73e8;">木偶戏</span>和<span style="color: #1a73e8;">闽南建筑</span>等丰富的非物质文化遗产。</p>
      `,
				progress: 60,
				selectedCity: ["福建省", "泉州市", "丰泽区"],
				audioCtx: null,
				isPlaying: false, // 播放状态
				duration: 0, // 音频总时长（秒）
				currentTime: 0, // 音频当前播放时长（秒）
				progressPercent: 0, // 进度条百分比
				travelMode: "bus",
				showRecommend: true,
				radius: 12,
			};
		},
		onLoad() {
			// 初始化音频上下文
			audioCtx = uni.createInnerAudioContext();
			audioCtx.src = "/static/city-music.mp3";
			// 监听音频加载完成
			audioCtx.onCanplay(() => {
				this.duration = audioCtx.duration;
			});
			// 监听播放进度
			audioCtx.onTimeUpdate(() => {
				this.currentTime = audioCtx.currentTime;
				this.progressPercent = (this.currentTime / this.duration) * 100;
			});
			// 监听播放结束
			audioCtx.onEnded(() => {
				this.isPlaying = false;
				this.currentTime = 0;
				this.progressPercent = 0;
			});
		},
		onUnload() {
			// 页面卸载时销毁音频
			if (audioCtx) {
				audioCtx.destroy();
				audioCtx = null;
			}
		},
		methods: {
			handleCityChange(e) {
				this.selectedCity = e.detail.value;
			},
			togglePlay() {
				this.isPlaying = !this.isPlaying;
				if (this.isPlaying) {
					audioCtx.play().catch((err) => {
						console.error("播放失败:", err);
						this.isPlaying = false; // 播放失败重置状态
					});
				} else {
					audioCtx.pause();
				}
			},
			// 格式化时间：秒 -> 分:秒
			formatTime(seconds) {
				const min = Math.floor(seconds / 60);
				const sec = Math.floor(seconds % 60);
				return `${min < 10 ? '0' + min : min}:${sec < 10 ? '0' + sec : sec}`;
			},
			handleTravelModeChange(e) {
				this.travelMode = e.detail.value;
			},
			handleShowRecommendChange(e) {
				this.showRecommend = e.detail.value;
			},
			handleRadiusChange(e) {
				this.radius = e.detail.value;
			},

		},
	};
</script>

<style>
	page {
	  overflow: hidden;
	  height: 100%;
	}
	.scroll-container {
		height: 100vh;
		width: 100%;
		box-sizing: border-box;
		padding: 10px;
		background-color: #f5f5f5;
	}

	.card {
		margin-bottom: 15px;
		padding: 15px;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}

	.swiper {
		height: 400rpx;
		width: 100%;
		overflow: hidden;
	}

	.swiper-img {
		height: 100%;
		width: 100%;
		display: block;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
		display: block;
		color: #202124;
	}

	.progress-desc {
		margin-bottom: 8px;
		font-size: 14px;
	}

	.progress-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.progress-bg {
		flex: 1;
		height: 6px;
		background-color: #e5e5e5;
		border-radius: 3px;
		margin-right: 8px;
		overflow: hidden;
	}

	.progress-bar {
		height: 100%;
		background-color: #1a73e8;
	}

	.progress-text {
		font-size: 14px;
		color: #333;
	}

	.picker-content {
		padding: 10px;
		background-color: #f5f5f5;
		border-radius: 4px;
		font-size: 14px;
	}

	.video {
		width: 100%;
		height: 200px;
		margin-top: 10px;
	}

	.music-desc {
		display: block;
		margin-top: 8px;
		font-size: 14px;
	}

	.music-card {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.music-btn {
		width: 80px;
		height: 36px;
		line-height: 36px;
		font-size: 14px;
		padding: 0;
		margin: 8px 0;
		background-color: #007aff;
		color: #fff;
		border-radius: 4px;
		align-self: center;
	}

	.music-desc {
		font-size: 12px;
		color: #999;
		margin-bottom: 8px;
		text-align: center;
		width: 100%;
	}

	.music-progress-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 100%;
	}

	.music-progress-bg {
		width: 80%;
		height: 4px;
		background-color: #e5e5e5;
		border-radius: 2px;
		overflow: hidden;
		margin-bottom: 4px;
	}

	.music-progress-bar {
		height: 100%;
		background-color: #007aff;
	}

	.music-time {
		font-size: 12px;
		color: #666;
	}

	.preference-item {
		margin-bottom: 12px;
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.preference-item slider {
		width: 160px;
	}

	::-webkit-slider-runnable-track {
		background-color: #e5e5e5;
		height: 4px;
		border-radius: 2px;
	}

	::-webkit-slider-thumb {
		background-color: #1a73e8;
		height: 16px;
		width: 16px;
		border-radius: 50%;
		margin-top: -6px;
	}

	.preference-item radio-group {
		display: flex;
		gap: 15px;
	}
</style>